<template>
	<view class="container">
		<view v-if="userInfo.user_info&&userInfo.user_info.can_publish==1">
			
			<view style="display: flex;align-items: center;justify-content: center;margin: 30rpx;">
				<image style="width: 180rpx;height: 180rpx" src="../../static/temp/info.png"></image>
			</view>
			<view style="font-size: 36rpx;font-weight: 800;text-align: center;">申请发布接龙权限</view>
			<view style="text-align: left;padding: 40rpx 100rpx;color: #808080;font-size: 28rpx;">本小程序仅供内部使用，请向系统管理员申请开通当前账号的团购接龙权限，通过后会自动跳转重新登录</view>
			<view style="display: flex;justify-content: center;" @click="addPublish()">
				<view style="padding: 18rpx 130rpx;margin: 60rpx;border-radius: 10rpx;font-size: 28rpx;background: #23A948;color: #FFFFFF;" >发送接龙权限申请</view>
			</view>
		</view>
		<view v-else>
			<Masks v-if="show_mask"></Masks>
			<!-- 头像及其他 -->
			<view class="avatar">
				<view class="left-avatar">
					<image :src="userInfo.user_info.avatar"></image>
					<text class="name">{{userInfo.user_info.nickname}}</text>
				</view>
				<view class="right-copy"><view  class="copy" @click="navTo('/pages/index/copy')">复制已有接龙</view></view>
			</view>
			<!-- 接龙标题 -->
			<view class="title">
				<view style="margin: 20rpx;padding-top: 20rpx;">
					<textarea auto-height v-model="drag_info.title" placeholder="输入接龙标题(必填)"  placeholder-style="color:#999999;font-weight:800" style="width: 100%;font-weight: 800;"></textarea>
					<!-- <input class="input-text" v-model="drag_info.title" placeholder="输入接龙标题(必填)"  placeholder-style="color:#999999;font-weight:800" /> -->
				</view>
				<view style="height: 2rpx;background: #ccc;margin:0rpx 20rpx;"></view>
				<view style="margin: 20rpx;">
					<textarea placeholder="输入接龙活动的描述介绍" v-model="drag_info.description" placeholder-style="color:#999999;font-size:28rpx" style="width: 100%;"></textarea>
				</view>
				<text v-if="!drag_info.address||drag_info.address==''" @click="selectLocation()" class="cell-icon yticon icon-address address"></text>
				<list-cell v-else icon="icon-address" @eventClick="selectLocation()" :background="_background" iconColor="#31AA69" :show_icon="false"  :title="drag_info.address" border="diy-cell-class" ></list-cell>
			</view>
			<!-- 商品列表 -->
			<view class="goods" v-for="(item,index) in drag_info.goods_list" :key="index">
				<view v-if="index==0" class="pd-20 b-bottom margin-20">团购商品({{drag_info.goods_list.length}})</view>
				<view class="pd-20 b-bottom margin-20 disflex">
					<view class="goods-title">商品名称</view>
					<view class="width-75">
						<!-- <input class="input-text" @blur="blurInput($event,index,'title')"  v-model="item.title"  placeholder="输入商品名称"/> -->
						<textarea placeholder="输入商品名称" v-model="item.title" auto-height style="width: 100%;"></textarea>
					</view>
				</view>
				<view class="pd-20 b-bottom margin-20 disflex">
					<view class="goods-title">价格(￥)</view>
					<view class="width-75"><input class="input-text" @blur="blurInput($event,index,'price')" v-model="item.price" placeholder="0.00"/></view>
				</view>
				<view class="pd-20 b-bottom margin-20 disflex">
					<view class="goods-title">库存(件)</view>
					<view class="width-75"><input class="input-text" @blur="blurInput($event,index,'store')" v-model="item.store" type="number"  placeholder="0"/></view>
				</view>
				<view class="pd-20 b-bottom margin-20 disflex">
					<view class="goods-title">商品图片</view>
					<view class="width-75">
						<view v-for="(_item,_index) in item.pics" :key="_index" style="position: relative;width: 140rpx;height: 140rpx;float: left;border-radius: 10rpx;margin: 10rpx">
							<image v-if="_item.type==1" :src="_item.src" @click="readImage(_item.src)"></image>
							<video v-else :src="_item.src" :controls="false" @click="readVideo(_item.src)" :show-center-play-btn="false"></video>
							<text class="cell-icon yticon icon-jia1 close" @click="removeFile(index,_index)"></text>
							<text v-if="_item.type==2" class="cell-icon yticon icon-player player" @click="readVideo(_item.src)"></text>
						</view>
						<view @click="uploadImageVideo(index)" style="float: left;width: 140rpx;height: 140rpx;margin:10rpx;display: flex;">
							<text class="cell-icon yticon icon-add"></text>	
						</view>
						
					</view>
					
				</view>
				<view class="pd-20 margin-20 disflex">
					<view class="width-60 disflex">
						<view class="op-btn" v-if="index!=(drag_info.goods_list.length-1)" @click="changeIndex(index,2)">下移</view>
						<view class="op-btn" v-if="index!=0" @click="changeIndex(index,1)">上移</view>
						<view class="op-btn" @click="insert_goods(index)">插入</view>
					</view>
					<view class="width-40 disflex">
						<view class="op-btn" @click="add_goods(2,item)">复制</view>
						<view class="op-btn" @click="removeGoods(index)" v-if="drag_info.goods_list.length>1">删除</view>
					</view>
				</view>
			</view>
			<!-- 添加按钮 -->
			<view class="add-btn" @click="add_goods(1)">
				<text style="color: #23A948;font-size: 42rpx">+</text>
				<text style="color: #23A948;font-size: 32rpx">添加商品</text>
			</view>
			<!-- 接龙设置 -->
			<view class="group-set">
				<view class="pd-20 b-bottom margin-20">接龙设置</view>
				<view class="pd-20 b-bottom margin-20 disflex">
					<view class="goods-title" >开始时间</view>
					<view class="width-75" @click="opendate(1)">
						<view class="uni-input date-input"  >{{drag_info.start_time}}</view>
						<text class="cell-icon yticon icon-you right-icon"></text>
						<uv-datetime-picker
							ref="datetimePicker1"
							v-model="init_start_time"
							mode="datetime"
							round="20"
							@confirm="confirm"
							:formatter="formatter"
						></uv-datetime-picker>
					</view>
				</view>
				<view class="pd-20 b-bottom margin-20 disflex">
					<view class="goods-title">结束时间</view>
					<view class="width-75" @click="opendate(2)">
						<view class="uni-input date-input"  >{{drag_info.end_time}}</view>
						<text class="cell-icon yticon icon-you right-icon"></text>
						<uv-datetime-picker
							ref="datetimePicker2"
							v-model="init_end_time"
							mode="datetime"
							round="20"
							@confirm="confirm"
							:formatter="formatter"
						></uv-datetime-picker>
					</view>
				</view>
				<view class="pd-20 b-bottom margin-20 disflex">
					<view class="goods-title" >所属群组</view>
					<view class="width-75">
						
						<picker mode="selector" :range="cluster_list"  range-key="cluster_name" @change="clusterChange" @cancel="cancelCluster">
							<view class="uni-input date-input"  >{{cluster_str}}</view>
							<text class="cell-icon yticon icon-you right-icon"></text>
						</picker>
					</view>
				</view>
				<view class="pd-20 b-bottom margin-20 disflex">
					<view class="goods-title" >用户复制接龙</view>
					<view class="width-75">
						
						<picker mode="selector" :range="copy_range" :value="copy_index"  @change="copyChange">
							<view class="uni-input date-input"  >{{copy_range[copy_index]}}</view>
							<text class="cell-icon yticon icon-you right-icon"></text>
						</picker>
					</view>
				</view>
				<view class="pd-20 margin-20 disflex">
					<view class="goods-title" style="width: 30%;">开启通知推送</view>
					<view class="width-75" style="text-align: right;">
						<switch @change="changeSwith" :checked="drag_info.send_msg"  style="transform:scale(0.7)"/>
					</view>
				</view>		
				
			</view>
			<!-- 提交 -->
			<view class="bottom-btn" @click="saveDrag()">
				<view  class="btn">确定</view>
			</view>
			<view v-if="show_video"  style="position: fixed;top: 20%;left: 0;right: 0;z-index: 3">
				<video style="width: 100%;" muted autoplay show-mute-btn :show-fullscreen-btn="false" :src="play_video_url"></video>
				<text class="cell-icon yticon icon-jia1 close" style="top: 20rpx;width: 60rpx; height: 60rpx; font-size: 28rpx; line-height: 60rpx;" @click="closeVideo()"></text>
			</view>
		</view>
		
	</view>
</template>

<script>
	import Masks from '@/components/mask';
	import { timeFormat } from '@/uni_modules/uv-ui-tools/libs/function/index.js'
	import listCell from '@/components/mix-list-cell';
	import {mapMutations,mapState} from 'vuex';
	import Api from '@/common/api';
	import UploadApi from '@/common/upload';
	export default{
		 
		components: {
			listCell,
			Masks
		},
		data(){
			return {
				show_mask:false,
				show_video:false,
				play_video_url:'',
				openDatePicker:false,
				_background:'rgba(35,169,72,0.1)',
				address:'',
				datetime_index:1,
				cluster_str:'不设置群组',
				cluster_list:[],
				cluster_index:0,
				copy_range:['允许','不允许'],
				copy_index:0,
				init_start_time:Number(new Date()),
				init_end_time:Number(new Date()),
				drag_info:{
					id:0,
					cluster_id:0,
					title:'',
					description:'',
					address:'',
					longitude:'',
					latitude:'',
					goods_list:[
						{title:'',price:'0.00','store':0,pics:[]}
					],
					start_time:'',
					end_time:'',
					send_msg:1,
					can_copy:1
				},
				drag_info2:{
					id:0,
					cluster_id:0,
					title:'',
					description:'',
					address:'',
					longitude:'',
					latitude:'',
					goods_list:[
						{title:'',price:'0.00','store':0,pics:[]}
					],
					start_time:'',
					end_time:'',
					send_msg:1,
					can_copy:1
				},
				
			}
		},
		onLoad(){	
			
		},
		
		onShow(){
			let editDrag = uni.getStorageSync('edit_drag')||'';
			if(editDrag!=''){
				this.drag_info = editDrag;
			}else{
				this.drag_info= this.drag_info2;
			}
			if(this.hasLogin){
				this.loadCluster()	
			}
			uni.setStorage({
				key:'remind',
				data:1
			})
		},
		onTabItemTap() {
		  if(!this.hasLogin){
			  uni.navigateTo({
			  	url:'/pages/public/wxLogin'
			  })
		  }
		},
		onReachBottom(){
			
		},
		computed:{
			...mapState(['hasLogin', 'userInfo'])
			
		},
		methods: {
			...mapMutations(['login']),
			navTo(url){
				uni.navigateTo({
					url:url
				})
			},
			
			changeSwith(e){
				this.drag_info.send_msg=e.detail.value?1:0;
				this.cacheDrag();
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			opendate(index){
				this.datetime_index=index;
				this.$refs[`datetimePicker${index}`].open();
			},
			confirm(e) {
				let d =timeFormat(e.value, 'yyyy-mm-dd hh:MM');
				if(this.datetime_index==1){
					this.drag_info.start_time = d;
				}
				if(this.datetime_index==2){
					this.drag_info.end_time=d;
				}
				this.cacheDrag();
			},
			add_goods(type=1,item={}){
				let tempArray =JSON.parse(JSON.stringify(this.drag_info.goods_list))
				if(type==1){
					tempArray.splice(tempArray.length,0,{title:'',price:'',store:0,pics:[]})
				}else{
					tempArray.splice(tempArray.length,0,item)
				}
				this.drag_info.goods_list = tempArray;
				this.cacheDrag();
				
			},
			insert_goods(index){
				let tempArray =JSON.parse(JSON.stringify(this.drag_info.goods_list))
				tempArray.splice(index+1,0,{title:'',price:'',store:0,pics:[]})
				this.drag_info.goods_list = tempArray;
				this.cacheDrag();
			},
			// 数组移动1向上2向下
			changeIndex(index,type){
				if(type==1){
					let tempOption = this.drag_info.goods_list[index - 1]
					this.$set(this.drag_info.goods_list, index - 1, this.drag_info.goods_list[index])
					this.$set(this.drag_info.goods_list, index, tempOption)
				}else{
					let tempOption = this.drag_info.goods_list[index + 1]
					this.$set(this.drag_info.goods_list, index + 1, this.drag_info.goods_list[index])
					this.$set(this.drag_info.goods_list, index, tempOption)
				}
				this.cacheDrag();
			},
			readImage(url){
				uni.previewImage({
					urls:[url]
				})
			},
			readVideo(url){
				this.show_mask=true;
				this.show_video=true;
				this.play_video_url=url;
			},
			closeVideo(){
				this.show_mask=false;
				this.show_video=false;
				this.play_video_url=''
			},
			selectLocation(){
				let that = this;
				//选地址之前保存信息
				uni.setStorage({
					key:'edit_drag',
					data:that.drag_info
				})
				uni.chooseLocation({
					success: (data)=> {
						let info = uni.getStorageSync('edit_drag')||'';
						if(info!=''){
							info.address=data.address;
							info.latitude=data.latitude;
							info.longitude=data.longitude;
							uni.setStorage({
								key:'edit_drag',
								data:info
							})
						}
						// that.drag_info.address = data.address;
						// that.drag_info.latitude=data.latitude;
						// that.drag_info.longitude=data.longitude;
					},
					fail: (aa) => {
						that.$api.msg(`选取位置失败`)
					}
				})
			},
			
		
			uploadImageVideo(index){
				this.cacheDrag();//上传前保存下数据
				let that = this;
				let data =[];
				uni.chooseMedia({
					maxDuration:10,
					mediaType:'mix',
					success: async (res)=> {
						const files = res.tempFiles;
						if(files.length>0){
							
							files.forEach(async function(value, _index) {
							    let rel =await UploadApi.apiUploadCall('post',UploadApi.apiName.upload_images,[value.tempFilePath],{code:111},true);
							    if(rel && rel!==false){
									that.drag_info.goods_list[index].pics.push({type:value.fileType=='image'?1:2,src:rel})
									that.cacheDrag()
							     }
							}); 
							return;
						}
						
					},
					fail:(err)=>{
						if(err.errMsg!='chooseMedia:fail cancel'){
							that.$api.msg(`上传文件失败`);	
						}
						
					},
					complete:()=>{
						that.cacheDrag();
					}
				})
			},
			removeFile(goods_index,file_index){
				this.drag_info.goods_list[goods_index].pics.splice(file_index, 1);
				this.cacheDrag();
			},
			cacheDrag(){
				uni.setStorage({
					key:'edit_drag',
					data:this.drag_info
				})
			},
			removeGoods(index){
				this.drag_info.goods_list.splice(index,1)
				this.cacheDrag();
			},
			blurInput(event,index,key){
				return;
				let val=event.detail.value;
				if(key=='title'){
					this.drag_info.goods_list[index].title =val;
				}
				if(key=='price'){
					this.drag_info.goods_list[index].price =val;
				}
				if(key=='store'){
					this.drag_info.goods_list[index].store =val;
				}
				
			},
			async saveDrag(){
				try{
					if(this.drag_info.title==''){ throw '请填写接龙标题';}
					if(this.drag_info.description==''){ throw '请填写接龙描述';}
					if(this.drag_info.address==''){ throw '请选择提货地址';}
					if(this.drag_info.goods_list.length==0){throw '请添加商品';}
					if(this.drag_info.start_time==''){throw '请选择接龙开始时间';}
					if(this.drag_info.end_time==''){throw '请填写接龙结束时间';}
					this.drag_info.goods_list.forEach(function(value,index){
						if(value.title==''){
							throw '请填写商品名称';
						}
						if(value.price==0||value.price==''){
							throw '请填写商品价格';
						}
						if(value.store==0||value.store==''){
							throw '请填写商品库存';
						}
						if(value.pics.length==0){
							throw '请上传商品图片或视频';
						}
					})
				}catch(err){
					this.$api.msg(err);
					return;
				}
				let data = await Api.apiCall('post',Api.apiName.purchase_save,{info:this.drag_info});
				if(!data){
					return;
				}
				uni.removeStorage({
				    key: 'edit_drag'  
				});
				uni.removeStorage({
				    key: 'remind'  
				});
				this.$api.msg(`开团成功！赶快分享接龙吧`)
				setTimeout(function(){
					uni.reLaunch({
						url:'/pages/record/detail?id='+data.data.id+'&leader_id='+data.data.user_id
					})
				},2500)
			},
			async loadCluster(){
				let data = await Api.apiCall('get',Api.apiName.cluster_lists,{page:1,size:10000},true);
				if(!data){
					return;
				}
				this.cluster_list =data.data;
			},
			clusterChange(e) {
				let _index = e.detail.value
				this.cluster_str=this.cluster_list[_index].cluster_name;
				this.drag_info.cluster_id=this.cluster_list[_index].cluster_id;
				this.cacheDrag();
			},
			cancelCluster(){
				this.cluster_str='不设置群组';
				this.drag_info.cluster_id=0;
				this.cacheDrag();
			},
			copyChange(e) {
				this.copy_index = e.detail.value
				this.drag_info.can_copy=e.detail.value;
				this.cacheDrag();
			},
			async addPublish(){
				let data = await Api.apiCall('post',Api.apiName.apply_publish,{});
				if(!data){
					return;
				}
				this.$api.msg(`申请成功，等待回复`)
			},
			
		},

	}
</script>

<style lang='scss'>
	page{
		background: #F5F5F5;
	}
	.container{
		display: flex;
		flex-direction: column;
		/* height: 100vh; */
	}
	.avatar{
		height: 140rpx;
		margin: 30rpx;
		border-radius: 10rpx;
		background: #FFFFFF;
		display: flex;
		image{
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}
	}
	.left-avatar{
		display: flex;
		flex:1;
		align-items: center;
		margin-left: 20rpx;
	}
	.name{
		margin-left:20rpx
	}
	.copy{
		border-radius: 32rpx;
		border: 1px solid #23A948;
		font-size: 28rpx;
		padding: 10rpx 20rpx;
		margin: 20rpx;
	}
	.right-copy{
		display: flex;
		align-items: center;
		color:#23A948;
	}
	.title{
		min-height: 540rpx;
		margin: 0rpx 30rpx;
		border-radius: 10rpx;
		background: #FFFFFF;
		position: relative;
	}
	.mar-left-20{
		margin-left: 20rpx;
	}
	.address{
		position: absolute;
		left: 10rpx;
		bottom: 20rpx;
		width: 60rpx;
		height: 60rpx;
		background: rgba(204 ,204 ,204,0.5);
		text-align: center;
		line-height: 60rpx;
		border-radius: 14rpx;
	}
	.input-text{
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
	}
	.diy-cell-class{
		padding: 8rpx 30rpx !important;
		margin: 20rpx;
		border-radius: 6rpx;
	}
	.clamp{
		color:#23A948 !important;
	}
	.goods{
		margin: 18rpx 30rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		image{
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}
		video{
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}
	}
	.pd-20{
		padding: 20rpx 0rpx;
	}
	.b-bottom{
		border-bottom: 1px solid #ccc;
	}
	.goods-title{
		display: flex;
		align-items: center;
		/* width: 130rpx; */
		font-size: 28rpx;
	}
	.width-75{
		/* width: 80%; */
		flex:3;
		margin-left: 20rpx;
	}
	.width-50{
		width: 50%;
	}
	.width-60{
		width: 60%;
	}
	.width-40{
		width: 40%;
	}
	.margin-20{
		margin:10rpx 20rpx;
	}
	.disflex{
		display: flex;
	}
	.op-btn{
		padding: 5rpx 10px;
		border: 1px solid #999999;
		width: 110rpx;
		border-radius: 30rpx;
		text-align: center;
		font-size: 24rpx;
		margin-left: 10rpx;
		color:#666666;
	}
	.close{
		position: absolute;
		right: 10rpx;
		top: 10rpx;
		width: 32rpx;
		height: 32rpx;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 50%;
		color: #FFFFFF;
		transform: rotate(45deg);
		font-size: 24rpx;
		line-height: 32rpx;
		text-align: center;
	}
	.player{
		position: absolute;
		top: 44rpx;
		left: 44rpx;
	}
	.add-btn{
		margin: 20rpx 30rpx 20rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		text-align: center;
		padding: 20rpx;
	}
	.group-set{
		margin: 0rpx 30rpx 160rpx;
		border-radius: 10rpx;
		background: #FFFFFF;
	}
	.date text{
		color:#000000 !important;
		text-align: right;
	}
	.bottom-btn{
		position: fixed;
		bottom: 0rpx;
		background: #FFFFFF;
		width: 100%;
		padding: 30rpx 20rpx;
		text-align: center;
		z-index: 2;
	}
	.btn{
		background: #23A948;
		border-radius: 8rpx;
		padding: 20rpx;
		color:#FFFFFF;
	}
	.date-input{
		float: left;
		width: 85%;
		font-size: 14px;
		text-align: right;
	}
	.right-icon{
		float: right;
		margin-right: 10px;
		margin-top: 2px;
		/* color:#ccc; */
		color:linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(128, 128, 128, 100));
	}
	.cpt-mask{
		top:0rpx !important;
		background-color: rgba(0,0,0,1) !important;  
		opacity: 1 !important;  
		z-index: 3 !important;  
	}
</style>
